<template>
    <div class="page-container">
        <div class="flow-type-content">
            <div class="title">流程类型</div>
            <ul>
                <li
                    :class="item.id === selectedType.typeId ? 'active' : ''"
                    v-for="item in types"
                    :key="item.id"
                    @click="typeSelect(item)"
                >
                    {{ item.name }}
                </li>
            </ul>
        </div>
        <div class="flow-type-node-content">
            <div class="grid-header">
                <div class="title">流程节点</div>
                <div class="operation">
                    <el-button type="default" @click="initNode">初始化默认节点</el-button>
                    <el-button type="primary" @click="addNode">新增</el-button>
                </div>
            </div>
            <div class="grid-content">
                <el-table :data="tableData" border>
                    <el-table-column prop="typeName" label="流程类型" width="180" show-overflow-tooltip />
                    <el-table-column prop="name" label="节点名称" width="120" show-overflow-tooltip />
                    <el-table-column
                        prop="category"
                        label="节点类型"
                        :formatter="categoryFmt"
                        width="200"
                        show-overflow-tooltip
                    />
                    <el-table-column prop="state" label="节点状态" width="100" show-overflow-tooltip />
                    <el-table-column prop="stateName" label="节点状态名称" width="160" show-overflow-tooltip />
                    <el-table-column prop="departmentName" label="部门" width="160" show-overflow-tooltip />
                    <el-table-column prop="roleName" label="角色" width="120" show-overflow-tooltip />
                    <el-table-column prop="handlerName" label="人员" width="120" show-overflow-tooltip />
                    <el-table-column fixed="right" label="操作" width="140">
                        <template #default="scope">
                            <el-button
                                v-show="scope.row.state !== 0 && scope.row.state !== 99"
                                size="small"
                                type="primary"
                                @click="editNode(scope.row)"
                            >
                                编辑
                            </el-button>
                            <el-popconfirm
                                title="正在进行敏感操作，是否继续？"
                                confirmButtonText="继续"
                                cancelButtonText="取消"
                                @confirm="delNode(scope.row)"
                            >
                                <template #reference>
                                    <el-button
                                        v-show="scope.row.state !== 0 && scope.row.state !== 99"
                                        type="danger"
                                        size="small"
                                    >
                                        删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
            title="流程管理"
            v-model="showDialog"
            width="500px"
            top="10vh"
            :lock-scroll="true"
            :close-on-click-modal="false"
            destroy-on-close
        >
            <div class="dialog-content">
                <div class="menu-form">
                    <div class="form-item">
                        <div class="label-class">节点名称</div>
                        <div class="content-class">
                            <el-input
                                v-model="form.name"
                                class="form-input-class"
                                placeholder="请输入菜单名称"
                            ></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">节点类型</div>
                        <div class="content-class">
                            <el-select
                                v-model="form.category"
                                class="form-input-class"
                                placeholder="请选择"
                                @change="categoryChange"
                            >
                                <el-option
                                    v-for="item in categorys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">节点状态</div>
                        <div class="content-class">
                            <el-input
                                v-model="form.state"
                                class="form-input-class"
                                placeholder="数字状态,1~98,不可重复"
                            ></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">节点状态名称</div>
                        <div class="content-class">
                            <el-input
                                v-model="form.stateName"
                                class="form-input-class"
                                placeholder="例：部门经理审核"
                            ></el-input>
                        </div>
                    </div>
                    <div v-show="form.category === 3" class="form-item">
                        <div class="label-class">部门名称</div>
                        <div class="content-class">
                            <el-input
                                v-model="form.departmentName"
                                placeholder="请选择"
                                readonly
                                class="form-input-class"
                            >
                                <template #append>
                                    <el-button type="primary" @click="showDepartmentDialog = true">选择</el-button>
                                </template>
                            </el-input>
                        </div>
                    </div>
                    <div v-show="form.category === 2 || form.category === 3 || form.category === 4" class="form-item">
                        <div class="label-class">角色</div>
                        <div class="content-class">
                            <el-input v-model="form.roleName" placeholder="请选择" readonly class="form-input-class">
                                <template #append>
                                    <el-button type="primary" @click="showRoleDialog = true">选择</el-button>
                                </template>
                            </el-input>
                        </div>
                    </div>
                    <div v-show="form.category === 1" class="form-item">
                        <div class="label-class">人员</div>
                        <div class="content-class">
                            <el-input v-model="form.handlerName" placeholder="请选择" readonly class="form-input-class">
                                <template #append>
                                    <el-button type="primary" @click="showEmployeeDialog = true">选择</el-button>
                                </template>
                            </el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">是否必须</div>
                        <div class="content-class">
                            <el-select v-model="form.isRequired" class="form-input-class" placeholder="请选择">
                                <el-option label="是" :value="true" />
                                <el-option label="否" :value="false" />
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showDialog = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </span>
            </template>
            <el-dialog width="400px" top="15vh" title="部门" v-model="showDepartmentDialog" append-to-body>
                <div class="tree-dialog-content">
                    <DepartmentTree @select="departmentSelected"></DepartmentTree>
                </div>
            </el-dialog>
            <el-dialog width="800px" top="15vh" title="人员" v-model="showEmployeeDialog" append-to-body>
                <div class="gird-dialog-content">
                    <EmployeeGrid :single="true" @select="employeeSelected"></EmployeeGrid>
                </div>
            </el-dialog>
            <el-dialog width="800px" top="15vh" title="角色" v-model="showRoleDialog" append-to-body>
                <div class="gird-dialog-content">
                    <RoleGridCpt :single="true" @select="roleSelected"></RoleGridCpt>
                </div>
            </el-dialog>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import DepartmentTree from '@/components/bas/DepartmentTree.vue'
import EmployeeGrid from '@/components/bas/EmployeeGrid.vue'
import RoleGridCpt from '@/components/sys/RoleGirdCpt.vue'

onMounted(() => {
    loadTypes()
})

// 流程选择数据
const selectedType = reactive({
    typeId: '',
    typeCode: '',
    typeName: ''
})

// 流程类型数据
const types = ref([])

/**
 * 加载流程类型
 */
const loadTypes = () => {
    // 修改查询参数
    let params = {}
    // 修改请求地址
    http.fetchForm({
        url: '/flow/queryTypes',
        method: 'get',
        data: params
    }).then((res) => {
        types.value = res.data
    })
}

/**
 * 类型选择事件
 */
const typeSelect = (item) => {
    selectedType.typeId = item.id
    selectedType.typeCode = item.code
    selectedType.typeName = item.name
    form.typeId = item.id
    form.typeCode = item.code
    form.typeName = item.name
    loadTypeNodes()
}

// 流程节点数据
const tableData = ref([])

/**
 * 加载流程节点
 */
const loadTypeNodes = () => {
    // 修改查询参数
    let params = {
        typeId: selectedType.typeId
    }
    // 修改请求地址
    http.fetchForm({
        url: '/flow/queryTypeNodes',
        method: 'get',
        data: params
    }).then((res) => {
        tableData.value = res.data
    })
}

// 表单显示隐藏
const showDialog = ref(false)

// 选择框显示隐藏
const showDepartmentDialog = ref(false)
const showEmployeeDialog = ref(false)
const showRoleDialog = ref(false)

const categorys = ref([
    {
        label: '默认节点',
        value: 0
    },
    {
        label: '固定人员',
        value: 1
    },
    {
        label: '固定角色',
        value: 2
    },
    {
        label: '指定部门及角色',
        value: 3
    },
    {
        label: '申请人部门及指定角色',
        value: 4
    }
])

const categoryFmt = (row, column, cellValue, index) => {
    let data = row[column.property]
    if (data === 0) {
        return '默认节点'
    } else if (data === 1) {
        return '固定人员'
    } else if (data === 2) {
        return '固定角色'
    } else if (data === 3) {
        return '指定部门及角色'
    } else if (data === 4) {
        return '申请人部门及指定角色'
    } else {
        return '未知类型'
    }
}

// 表单属性
const form = reactive({
    id: '',
    typeId: '',
    typeCode: '',
    typeName: '',
    name: '',
    category: '',
    state: '',
    stateName: '',
    departmentId: '',
    departmentCode: '',
    departmentName: '',
    roleCode: '',
    roleName: '',
    handler: '',
    handlerName: '',
    isRequired: true
})

/**
 * 部门选择事件
 */
const departmentSelected = (res) => {
    form.departmentId = res.id
    form.departmentCode = res.code
    form.departmentName = res.label
    showDepartmentDialog.value = false
}

const employeeSelected = (res) => {
    form.handler = res[0].employeeNo
    form.handlerName = res[0].name
    showEmployeeDialog.value = false
}

const roleSelected = (res) => {
    form.roleCode = res[0].code
    form.roleName = res[0].name
    showRoleDialog.value = false
}

const initNode = () => {
    if (selectedType.typeId === '') {
        ElNotification({
            title: '提示',
            message: '请选择流程类型',
            type: 'warning'
        })
        return
    }
    let params = {
        typeId: selectedType.typeId,
        typeCode: selectedType.typeCode,
        typeName: selectedType.typeName
    }
    http.fetchJson({
        url: '/flow/initTypeNodes',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '保存成功',
            type: 'success'
        })
        loadTypeNodes()
    })
}

/**
 * 新增按钮事件
 */
const addNode = () => {
    let initData = {
        id: '',
        name: '',
        category: '',
        state: '',
        stateName: '',
        departmentId: '',
        departmentCode: '',
        departmentName: '',
        roleCode: '',
        roleName: '',
        handler: '',
        handlerName: '',
        isRequired: true
    }
    Object.assign(form, initData)
    showDialog.value = true
}

const categoryChange = () => {
    form.departmentId = ''
    form.departmentCode = ''
    form.departmentName = ''
    form.handler = ''
    form.handlerName = ''
    form.roleCode = ''
    form.roleName = ''
}

/**
 * 提交表单
 */
const onSubmit = () => {
    let params = JSON.parse(JSON.stringify(form))
    console.log(params)
    http.fetchJson({
        url: '/flow/save',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '保存成功',
            type: 'success'
        })
        showDialog.value = false
        loadTypeNodes()
    })
}

const editNode = (row) => {
    Object.assign(form, row)
    showDialog.value = true
}

const delNode = (row) => {
    http.fetchForm({
        url: '/flow/deleteById',
        method: 'post',
        data: {
            id: row.id
        }
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '删除成功',
            type: 'success'
        })
        loadTypeNodes()
    })
}
</script>
<style scoped>
.page-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.flow-type-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    overflow: auto;
    overflow-x: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.flow-type-content > .title {
    padding: 20px 15px;
    font-size: 16px;
    line-height: 28px;
    color: #464c5b;
}

.flow-type-content ul {
    list-style: none;
    font-size: 14px;
    font-weight: lighter;
    padding-inline-start: 15px;
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.flow-type-content ul li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /*color: #fff;*/
}

.flow-type-content ul li:hover {
    cursor: pointer;
}

.flow-type-content ul li:last-child {
    border-bottom: none;
}

.flow-type-content ul .active {
    color: #4875ae;
    font-weight: normal;
    border-right: 3px solid #4875ae;
}

.flow-type-node-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 220px;
    overflow: auto;
    overflow-x: hidden;
}

.flow-type-node-content > .grid-header {
    display: flex;
    justify-content: space-between;
    padding: 20px 15px;
}

.flow-type-node-content > .grid-header > .title {
    font-size: 16px;
    color: #464c5b;
    line-height: 28px;
}

.grid-content {
    padding: 0 15px;
}

.dialog-content {
    padding: 10px 20px;
}

.label-class {
    width: 100%;
    padding: 10px 0;
    font-size: 12px;
    color: #657180;
    font-weight: bold;
}

.content-class {
    width: 100%;
    padding: 0 0 10px 0;
}

.form-input-class {
    width: 100%;
}

.tree-dialog-content {
    padding: 10px;
    height: 400px;
    overflow: auto;
    overflow-x: hidden;
}

.gird-dialog-content {
    padding: 0;
}
</style>
